<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Toolbar - Sketch MeaXure</title>

    <link href="assets/css/normalize.css" rel="stylesheet">
    <link href="assets/css/app.css" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="assets/js/common.js"></script>
    <script>
        function init(data) {
            if (data && data.language) loadLanguage(data.language);
            let html = `
<div class="toolbar">
    <div class="section">
        <button class="command" data-action="coordinate" title="${_('Coordinate')}"
            style="background-image: url(icons/coordinate-normal.svg);"></button><!-- no space
     --><button class="command" data-action="overlay" title="${_('Overlay')}"
            style="background-image: url(icons/overlay-normal.svg);"></button><!-- no space
     --><button class="command" data-action="addSlice" title="${_('addSlice')}"
            style="background-image: url(icons/create-slice-normal.svg);"></button>
    </div>
    <div class="section">
        <button class="command" data-action="size" data-options="top" title="${_('Top Width')}"
            style="background-image: url(icons/width-top-normal.svg);"></button><!-- no space
     --><button class="command" data-action="size" data-options="middle" title="${_('Middle Width')}"
            style="background-image: url(icons/width-middle-normal.svg);"></button><!-- no space
     --><button class="command" data-action="size" data-options="bottom" title="${_('Bottom Width')}"
            style="background-image: url(icons/width-bottom-normal.svg);"></button><!-- no space
     --><button class="command" data-action="size" data-options="left" title="${_('Left Height')}"
            style="background-image: url(icons/height-left-normal.svg);"></button><!-- no space
     --><button class="command" data-action="size" data-options="center" title="${_('Center Height')}"
            style="background-image: url(icons/height-center-normal.svg);"></button><!-- no space
     --><button class="command" data-action="size" data-options="right" title="${_('Right Height')}"
            style="background-image: url(icons/height-right-normal.svg);"></button>
    </div>
    <div class="section">
        <button class="command" data-action="spacing" data-options="horizontal" title="${_('Horizontal Distance')}"
            style="background-image: url(icons/horizontal-distance-normal.svg);"></button><!-- no space
     --><button class="command" data-action="spacing" data-options="left" title="${_('Left Spacing')}"
            style="background-image: url(icons/spacing-left-normal.svg);"></button><!-- no space
     --><button class="command" data-action="spacing" data-options="right" title="${_('Right Spacing')}"
            style="background-image: url(icons/spacing-right-normal.svg);"></button><!-- no space
     --><button class="command" data-action="spacing" data-options="vertical" title="${_('Verticaly Distance')}"
            style="background-image: url(icons/vertical-distance-normal.svg);"></button><!-- no space
     --><button class="command" data-action="spacing" data-options="top" title="${_('Top Spacing')}"
            style="background-image: url(icons/spacing-top-normal.svg);"></button><!-- no space
     --><button class="command" data-action="spacing" data-options="bottom" title="${_('Bottom Spacing')}"
            style="background-image: url(icons/spacing-bottom-normal.svg);"></button>
    </div>
    <div class="section">
        <button class="command" data-action="properties" data-options="top" title="${_('Label on top')}"
            style="background-image: url(icons/properties-top-normal.svg);"></button><!-- no space
     --><button class="command" data-action="properties" data-options="right" title="${_('Label on right')}"
            style="background-image: url(icons/properties-right-normal.svg);"></button><!-- no space
     --><button class="command" data-action="note" title="${_('Make Note')}"
            style="background-image: url(icons/create-note-normal.svg);"></button><!-- no space
     --><button class="command" data-action="properties" data-options="left" title="${_('Label on left')}"
            style="background-image: url(icons/properties-left-normal.svg);"></button><!-- no space
     --><button class="command" data-action="properties" data-options="bottom" title="${_('Label on bottom')}"
            style="background-image: url(icons/properties-bottom-normal.svg);"></button>
    </div>
    <div class="section">
        <div>
            <label title="${_('Sizing by percentage')}">
                <div class="checkbox">
                    <input id="byPercentage" type="checkbox" name="byPercentage" value="1">
                    <label for="byPercentage"></label>
                </div>
                <span>${_('Percentage')}</span>

            </label>
        </div>
        <div>
            <label title="${_('Sizing by influence')}">
                <div class="checkbox">
                    <input id="byInfluence" type="checkbox" name="byInfluence" value="1">
                    <label for="byInfluence"></label>
                </div>
                ${_('Influence')}
            </label>
        </div>
    </div>
    <div class="section">
        <button class="command small" data-action="visibility" title="${_('Toggle Hidden')}"
            style="background-image: url(icons/hidden-normal.svg);"></button><!-- no space
     --><button class="command small" data-action="lock" title="${_('Toggle Locked')}"
            style="background-image: url(icons/locked-normal.svg);"></button><!-- no space
     --><button class="command small" data-action="clear" title="${_('Clean Marks')}"
            style="background-image: url(icons/clear-normal.svg);"></button><!-- no space
     --><button class="command small" data-action="export" title="${_('Export')}"
            style="background-image: url(icons/export-normal.svg);"></button><!-- no space
     --><button class="command small" data-action="settings" title="${_('Settings')}"
            style="background-image: url(icons/settings-normal.svg);"></button>
    </div>
</div>
`;
            $('body').html(html);
            $('input[name=byInfluence]').prop("checked", data.byInfluence);
            $('input[name=byPercentage]').prop("checked", data.byPercentage);
            $('.command').on('click', function () {
                let options = Object.assign(
                    {
                        byInfluence: $('input[name=byInfluence]:checked').val() == '1',
                        byPercentage: $('input[name=byPercentage]:checked').val() == '1',
                    },
                    this.dataset
                );
                // console.log(options);
                if (!window.meaxure) return;
                meaxure.postMessage('command', options);
            });
            $('input[type=checkbox]').change(function () {
                let options = {
                    byInfluence: $('input[name=byInfluence]:checked').val() == '1',
                    byPercentage: $('input[name=byPercentage]:checked').val() == '1',
                }
                // console.log(options);
                if (!window.meaxure) return;
                meaxure.postMessage('command', options);
            });
        }
    </script>
    <style>
        .toolbar {
            width: 108px;
            padding: 8px;
            margin: auto;
        }

        label {
            line-height: 20px;
        }

        .toolbar .section {
            margin: 0 0 18px 0;
            /* remove letter spacing of buttons */
            /* font-size: 0; */
        }

        .command {
            width: 32px;
            height: 32px;
            background-size: 32px;
            background-repeat: no-repeat;
            background-position: center center;
            background-color: #3d3d3d;
            margin: 0 4px 4px 0;
            cursor: pointer;
            border: 1px solid #535353;
            border-radius: 2px;
        }

        .command.small {
            width: 24px;
            height: 24px;
            background-size: 24px;
            background-color: transparent;
            border: none;
        }

        .command:hover {
            background-color: #303030;
        }

        .command:active {
            background-color: #4d4d4d;
        }
    </style>
</head>

<body>
    <script>
        if (window.meaxure) {
            meaxure.postMessage('init').then(data => {
                init(data);
                onInitOK();
            }).catch(error => showError(error));
        } else {
            init({});
        }
    </script>
</body>

</html>